<template>
  <div id="list">
    <header>
      <div class="returns">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="search">
        <i class="iconfont icon-fangdajing"></i>
        <!-- <input type="text" placeholder="搜您喜欢的..."> -->
        <span>搜您喜欢的...</span>
      </div>
      <div class="go-home">
        <img src="../assets/images/home.png" alt="">
      </div>
    </header>

    <section>
      <div class="list-l" ref='left'>
        <ul class="l-item">
          <li :class='{ active: index == currentIndex }' v-for='(item, index) in leftData' :key="index"
            @click='goSrcoll(index)'>{{ item.name }}</li>

        </ul>
      </div>
      <div class="list-r" ref='right'>
        <div>
          <ul v-for='(item, index) in rightData' :key='index'>
            <li class="shop-list" v-for='(k, i) in item' :key='i'>
              <h2>{{ k.name }}</h2>
              <ul class="r-content">
                <li v-for='(j, idx) in k.list' :key='idx'>
                  <img :src="j.imgUrl" alt="">
                  <span>{{ j.name }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>
  
<script>
import Tabbar from '@/components/common/Tabbar.vue'
//引入插件
import BetterScroll from 'better-scroll'
import Http from '@/common/api/request.js'
export default {
  name: 'List',
  components: {
    Tabbar,
  },
  data() {
    return {
      leftData: [],
      rightData: [],
      rightBScroll: '',
      leftBScroll: '',
      allHeight: [],
      scrollY: 0
    };
  },
  created() {
    this.getCateList()

  },
  mounted() {
  },
  methods: {
    goSrcoll(index) {

      this.rightBScroll.scrollTo(0, -this.allHeight[index], 300)
      //   console(index,this.currentIndex())
    },
    async getCateList() {
      let res = await Http.$axios({
        url: '/api/goods/list',
      })
      let leftArr = []
      let rightArr = []

      res.forEach(v => {
        leftArr.push({
          id: v.id,
          name: v.name
        })
        rightArr.push(v.data)
      })
      this.leftData = leftArr
      this.rightData = rightArr

      //当dom都加载完毕了再去执行
      this.$nextTick(() => {
        this.leftBScroll = new BetterScroll(this.$refs.left, {
          click: true,
          movable: true,
          zoom: true
        })
        this.rightBScroll = new BetterScroll(this.$refs.right, {
          click: true,
          probeType: 3,
          movable: true,
          zoom: true
        })
        this.rightBScroll.hasVerticalScroll = true
        this.rightBScroll.maxScrollY = -1600
        // console.log(this.leftBScroll)
        // console.log(this.rightBScroll)
        //统计右侧所有板块高度值，并且放入数组中
        let height = 0
        this.allHeight.push(height)
        //获取右侧每一块高度
        let uls = this.$refs.right.getElementsByClassName('shop-list')
        //把dom对象转换成真正的数组
        Array.from(uls).forEach(v => {
          height += v.clientHeight
          this.allHeight.push(height)
        })

        //得到右侧滚动的值
        this.rightBScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(pos.y)

        })

      })
    }
  },
  computed: {
    currentIndex() {
      return this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1]
      })
    }
  }
};
</script>



  
<style scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.173333rem;
  background-color: #b0352f;
}

header .returns {
  line-height: 1.173333rem;
  padding: 0 0.533333rem;
}

header .returns i {
  color: #fff;
  font-size: 0.693333rem;
}

header .search {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0.16rem 0.266666rem;
  background-color: #FFFFFF;
  border-radius: 0.64rem;
}

header .search i {
  padding-right: 0.16rem;
  color: #666;
  font-size: 0.48rem;
}

header .search span {
  color: #666;
  font-size: 0.373333rem;
}

header .go-home {
  padding: 0 0.266666rem;
  line-height: 1.173333rem;
}

header .go-home img {
  width: 0.48rem;
  height: 0.48rem;
}

section {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 70%;
}

.list-l {
  display: flex;
  width: 2.48rem;
  background-color: #fff;
  border-right: 1px solid #CCCCCC;
  overflow: hidden;
}

.list-l .border {
  width: 2px;
  height: 1.3333rem;
  transition: all .5s;
  background-color: #b54f4a;
}

.list-l .l-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}

.list-l .l-item li {
  width: 100%;
  line-height: 1.333333rem;
  text-align: center;
  font-size: 0.373333rem;
}

.list-l .l-item .active {
  color: #b54f4a;
  border-left: 6px solid #b54f4a;
}

.list-r {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.list-r .shop-list {
  text-align: center;
}

.list-r .shop-list h2 {
  padding: 0.533333rem 0;
  font-size: 0.64rem;
  font-weight: 400;
}

.list-r .shop-list .r-content {
  display: flex;
  flex-wrap: wrap;
}

.list-r .shop-list .r-content li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  padding: 0.266666rem 0;
}

.list-r .shop-list .r-content li img {
  width: 1.413333rem;
  height: 1.413333rem;
}

.list-r .shop-list .r-content li span {
  font-size: 0.426666rem;
}

::v-deep.tabbar {
  border-top: 1px solid #CCCCCC;
}
</style>
  